<template>
  <div class="app-container">
    <el-button type="primary" icon="el-icon-edit" round @click="outerVisible = true">新增作业</el-button>

    <el-table :data="list" border fit highlight-current-row style="width: 100%;">
      <el-table-column prop="idassignment" label="作业ID"></el-table-column>
      <el-table-column prop="title" label="作业名称"></el-table-column>
      <el-table-column prop="classNames" label="下发班级" width="250"></el-table-column>
      <el-table-column label="查看分布" width="100">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-more" @click="showPlotChart()" circle></el-button>
        </template>
      </el-table-column>
      <el-table-column prop="commence" label="发布日期"></el-table-column>
      <el-table-column prop="deadline" label="截止日期"></el-table-column>
      <el-table-column prop="status" label="状态" width="80"></el-table-column>
      <el-table-column label="操作" width="365">
        <template slot-scope="scope">
          <el-button
            size="mini"
            icon="el-icon-search"
            @click="handleCheck(scope.$index, scope.row)"
          >查看</el-button>
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            @click="handleCheck(scope.$index, scope.row)"
          >编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            @click="handleCheck(scope.$index, scope.row)"
          >删除</el-button>
          <el-button
            size="mini"
            type="warning"
            icon="el-icon-view"
            @click="handleInspect(scope.$index, scope.row)"
          >审视</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />-->

    <el-dialog title="新建作业" :visible.sync="outerVisible" width="89%" :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="作业名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="日期选择">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <el-row>
        <el-col></el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-transfer :titles="['可选题目', '已选题目']" v-model="selectedProblom" :data="problemlist"></el-transfer>
        </el-col>
        <el-col :span="12">
          <el-transfer :titles="['可选班级', '已选班级']" v-model="selectedClass" :data="classList"></el-transfer>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-button type="primary" @click="innerVisible = true">点此配置插件</el-button>
        </el-col>
      </el-row>

      <el-dialog width="70%" title="插件检查项配置" :visible.sync="innerVisible" append-to-body>
        <el-collapse v-model="activeName" accordion>
          <el-collapse-item title="代码规范性检查" name="1">
            <span v-html="rawHtmlstyle"></span>
          </el-collapse-item>
          <el-collapse-item title="静态代码分析" name="2">
            <span v-html="rawHtmlstatic"></span>
          </el-collapse-item>
          <el-collapse-item title="查重" name="3">
            <span v-html="rawHtmlre"></span>
          </el-collapse-item>
        </el-collapse>
        <el-button @click="innerVisible = false">提交配置</el-button>
      </el-dialog>
      <span slot="footer" class="dialog-footer">
        <el-button @click="outerVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleNewAssignment()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 查看题目 -->
    <el-dialog title="作业题目列表" :visible.sync="outerVisible1">
      <el-table :data="tempProblemlist" style="width: 100%">
        <el-table-column prop="id" label="题号" width="180"></el-table-column>
        <el-table-column prop="title" label="题目名" width="180"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="handleProblemDetail()" type="text" size="small">查看</el-button>
            <!-- <el-button type="text" size="small">编辑</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <el-dialog width="70%" title="题目详情" :visible.sync="innerVisible1" append-to-body>
        <h3>先序遍历</h3>
        <p>根据一棵树的先序遍历与中序遍历输出后续遍历</p>
        <p>Sample Input: 先序3,9,20,15,7，中序 9,3,15,20,7</p>
        <p>Sample Output: 9,15,7,20,3</p>
        <el-form>
          <el-form-item label="编译器">
            <el-select v-model="form.region" placeholder="GCC">
              <el-option label="GCC" value="gcc"></el-option>
              <el-option label="G++" value="g++"></el-option>
            </el-select>
          </el-form-item>
        </el-form>

        <codemirror v-model="code"></codemirror>
        <div slot="footer" class="dialog-footer">
          <el-button @click="innerVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="innerVisible1 = false">关闭</el-button>
          <!-- 教师为“关闭”，学生为”提交 -->
        </div>
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button @click="outerVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="outerVisible1 = false">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 批量审查对话框 -->
    <el-dialog title="作业批量审视" :visible.sync="batchVisible" width="50%" :before-close="handleClose">
      <h2>代码规范性</h2>
      <iframe
        height="250"
        width="300"
        style=" display: inline-block"
        src="http://192.168.1.102:8000/cpplintHtml/pie.html"
      ></iframe>
      <iframe
        height="250"
        width="300"
        style=" display: inline-block;"
        src="http://192.168.1.102:8000/cpplintHtml/histogram.html"
      ></iframe>
      <el-divider></el-divider>
      <h2>静态代码检查</h2>
      <iframe
        height="250"
        width="300"
        style=" display: inline-block"
        src="http://192.168.1.102:8000/cppcheckHtml/pie.html"
      ></iframe>
      <iframe
        height="250"
        width="300"
        style=" display: inline-block;"
        src="http://192.168.1.102:8000/cppcheckHtml/histogram.html"
      ></iframe>
      <el-divider></el-divider>
      <h2>代码查重</h2>
      <iframe
        height="250"
        width="300"
        style=" display: inline-block"
        src="http://192.168.1.102:8000/recheckHtml/pie.html"
      ></iframe>

      <span slot="footer" class="dialog-footer">
        <el-button @click="batchVisible = false">取 消</el-button>
        <el-button type="primary" @click="batchVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 班级箱线图 -->
    <el-dialog title="成绩分布箱线图" :visible.sync="plotVisible" width="50%" :before-close="handleClose">
      <!-- <div id="chart" ref="myEchart"></div> -->
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="plotVisible = false">取 消</el-button>
        <el-button type="primary" @click="plotVisible = false">确 定</el-button>
      </span>-->
      <img src="src/assets/各班作业完成情况.png"/>
    </el-dialog>
  </div>
</template>

<script>
// import {
//   fetchList,
//   fetchPv,
//   createArticle,
//   updateArticle
// } from "@/api/article";
import { fetchList, fetchListByTeaId } from "@/api/assignment";
import waves from "@/directive/waves"; // Waves directive
import { parseTime } from "@/utils";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import { codemirror } from "vue-codemirror-lite";
import echarts from "echarts";

export default {
  name: "DoWork",
  components: { Pagination, codemirror },
  directives: { waves },
  data() {
    const generateProblemData = _ => {
      const data = [];
      for (let i = 1; i <= 15; i++) {
        data.push({
          key: i,
          label: `题目${i}`,
          disabled: false
        });
      }
      return data; //模拟题目数据
    };
    const generateClassData = _ => {
      const data = [];
      for (let i = 1; i <= 4; i++) {
        data.push({
          key: i,
          label: `2019年秋C程序设计${i}班`,
          disabled: false
        });
      }
      return data; //模拟班级数据
    };
    return {
      plotVisible: false, //箱线图
      code: "", //srccode
      // tableKey: 0,
      batchVisible: false, //批量审查
      outerVisible1: false, //查看作业题目列表对话框可视
      innerVisible1: false,
      tempProblemlist: [
        { id: 5, title: "先序遍历" },
        { id: 6, title: "中序遍历" },
        { id: 7, title: "后序遍历" }
      ],
      outerVisible: false, //创建作业对话框的可视
      innerVisible: false,
      list: [], //可以查看的作业列表
      total: 0,
      listLoading: true,
      listQuery: {
        //分页
        page: 1,
        limit: 10,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: "+id"
      },
      problemlist: generateProblemData(), //穿梭框，创建新作业时，添加题目
      selectedProblom: [],
      classList: generateClassData(), //穿梭框，创建新作业时，添加班级
      selectedClass: [],
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      }, //新建作业的form表单
      value1: null, // 日期选择器
      activeName: 1, // 插件配置折叠面板
      rawHtmlre: `<div id="codeRecheck">
    阈值
    <input type="number" name="thresholdValue" value="" min="20" max="100" placeholder="20-100" />
    <font size="2">/*查重的标准。相似度(百分数)小于阈值的作业通过查重检查，反之则不通过*/</font>
  </div>`,
      rawHtmlstatic: `<div id="cppcheck">
    总分
    <input type="number" name="totalScore" value="" min="1" max="100" placeholder="分数" />
    <font size="2">/*各检查项分数之和*/</font>
    <br />
    启用错误消息(默认开启)
    <input type="number" name="scoreOfError" value="" min="1" max="100" placeholder="分数" />
    <font size="2">/*错误消息：代码中的错误项（编译器检查不出来的BUG），如：数组越界、内存泄漏等*/</font>
    <br />
    启用警告消息
    <input type="checkbox" name="checkWarning" value="warning" />
    <input type="number" name="scoreOfWarning" value="" min="1" max="100" placeholder="分数" />
    <font size="2">/*警告消息：为了避免产生bug而提供的编程改进意见，如：所写的代码可能出现空指针异常等*/</font>
    <br />
    启用风格警告消息
    <input type="checkbox" name="checkStyle" value="style" />
    <input type="number" name="scoreOfStyle" value="" min="1" max="100" placeholder="分数" />
    <font size="2">/*风格警告消息：风格有关问题的代码清理，如：冗余代码、常量性等*/</font>
    <br />
    启用可移植性警告消息
    <input type="checkbox" name="checkPortability" value="portability" />
    <input type="number" name="scoreOfPortability" value="" min="1" max="100" placeholder="分数" />
    <font size="2">/*可移植性警告消息：提示跨平台时容易出现的问题，如：64 位的可移植性、不同的编译器中代码运行结果不同等*/</font>
    <br />
    启用性能警告消息
    <input type="checkbox" name="checkPerformance" value="performance">
    <input type="number" name="scoreOfPerformance" value="" min="1" max="100" placeholder="分数" />
    <font size="2">性能警告消息：建议可优化的代码（这些建议只是基于常识，即使修复这些消息，也不确定会得到任何可测量的性能提升）；</font>
    <br />
  </div>`,
      rawHtmlstyle: `<div id = "cpplint" >
		总分
		<input type="number" value="" min="1" max="100"  placeholder="分数" />
		<font size="2">/*各检查项分数之和*/</font>
	    <br />		
		检查函数注释
		<input type="checkbox" name="checkFuncAnnotation" value="~ RULE_5_3_A_provide_doxygen_function_comment_on_function_in_impl" />
		<input type="number" name="scoreOfFuncAnnotation" value="" min="1" max="100" placeholder="分数" />
	    <font size="2">/*函数必须提供doxygen格式的注释*/</font>
	    <br />   
	        检查函数命名
	    <input type="checkbox" name="checkFuncName" value="~ RULE_3_3_A_start_function_name_with_lowercase_unix" />
	    <input type="number" name="scoreOfFuncName" value="" min="1" max="100" placeholder="分数" />
	    <font size="2">/*函数的命名必须以小写字母开头*/</font>
	    <br />   
	       检查函数参数个数
	    <input type="checkbox" name="checkFuncParamtersNum" value="~ RULE_6_1_E_do_not_use_more_than_5_paramters_in_function" />
	    <input type="number" name="scoreOfFuncParamtersNum" value="" min="1" max="100" placeholder="分数" />
	    <font size="2">/*检查函数参数个数：函数参数不能超过5个*/</font>
	    <br />
	        检查函数内部语句行数
	    <input type="checkbox" name="checkFuncStatLinesNum" value="~ RULE_6_1_G_write_less_than_200_lines_for_function" />
	    <input type="number" name="scoreOfFuncStatLinesNum" value="" min="1" max="100" placeholder="分数" />
	    <font size="2">/*函数内部代码不能超过200行*/</font>
	    <br />
	       检查宏常量命名
	    <input type="checkbox" name="checkMacroName" value="~ RULE_6_5_B_do_not_use_lowercase_for_macro_constants" />
	    <input type="number" name="scoreOfMacroName" value="" min="1" max="100" placeholder="分数" />
	    <font size="2">/*宏常量命名所用的字母必须全是大写字母*/</font>
	    <br />	       
	       检查嵌套深度
	    <input type="checkbox" name="checkNestedNum" value="~ RULE_A_3_avoid_too_deep_block" />
	    <input type="number" name="scoreOfNestedNum" value="" min="1" max="100" placeholder="分数" />
	    <font size="2">/*代码的循环、选择嵌套深度不能超过3层*/</font>
	    <br />	 
	       检查是否使用goto语句
	    <input type="checkbox" name="checkUseGoto" value="~ RULE_7_2_B_do_not_use_goto_statement" />
	    <input type="number" name="scoreOfUseGoto" value="" min="1" max="100" placeholder="分数" />
	    <font size="2">/*代码中不能使用goto语句*/</font>
	    <br />
	       检查每行代码长度
	    <input type="checkbox" name="checkLineLength" value="~ RULE_4_4_A_do_not_write_over_120_columns_per_line" />
	    <input type="number" name="scoreOfLineLength" value="" min="1" max="100" placeholder="分数" />
	    <font size="2">/*每一行代码不能超过120字符*/</font>
	    <br />
	        检查缩进格式
	    <input type="checkbox" id = "identationOfTab" name="checkIdentationStyle" value="~ RULE_4_1_A_A_use_tab_for_indentation" onclick = "check()" />tab
	    <input type="checkbox" id = "identationOfSpace" name="checkIdentationStyle" value="~ RULE_4_1_A_B_use_space_for_indentation" onclick = "check()" />space
	    <input type="number" name="scoreOfIdentationStyle" value="" min="1" max="100" placeholder="分数" />
	    <font size="2">/*代码只能用tab或者space进行缩进*/</font>
	    <br />       
	        检查关键词前后空格
	    <input type="checkbox" name="checkWordSpace" value="~ RULE_4_2_A_B_space_around_word" />
	    <input type="number" name="scoreOfWordSpace" value="" min="1" max="100" placeholder="分数" />
	    <font size="2">/*关键词(if/else/for)和括号之间要使用一个空格隔开*/</font>
	    <br />	    
	        检查关键词是否使用大括号
	    <input type="checkbox" name="checkKeyWordsUseBraces" value="~ RULE_4_5_B_use_braces_even_for_one_statement" />
	    <input type="number" name="scoreOfKeyWordsUseBraces" value="" min="1" max="100" placeholder="分数" />
	    <font size="2">/*当关键词内部只有一条语句时，也必须使用一对大括号包裹*/</font>
	    <br />	        
	        扩展检查项
	    <input type="number" name="scoreOfExtendRules" value="" min="1" max="100" placeholder="分数" />
	    <font size="2">/*根据需求添加其他检查项*/</font>
	    <a href="https://github.com/yangyechi/DiplomaProject/tree/master/cpplint" title="扩展检查项文档说明">文档</a>
	    <br />
	    <textarea name="checkExtendRules" placeholder="请输入完整的规则,规则间用英文分号分割." rows="4" cols="73"></textarea>
	    <br />
	</div>
` //风格检查的插件配置项
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      // this.total = this.list.length
      // console.log(this.total)
      this.listLoading = true;
      var token = this.$store.getters.token;
      console.log(token);
      fetchListByTeaId(token).then(response => {
        // console.log(response.data.data);
        this.list = response.data.data;
        this.total = response.data.total;

        var str = {
          //  选中了题目3，4，5
          idassignment: 2,
          title: "单元典例训练",
          classNames: [
            "2019年春C程序设计1班",
            "2019年春C程序设计2班",
            "2019年春C程序设计3班"
          ],
          commence: "2019-04-08",
          deadline: "2019-05-08",
          status: "已结束"
        };
        this.list = new Array(...this.list, str);
      });
      // fetchList(this.listQuery).then(response => {
      //   this.list = response.data.items;
      //   this.total = response.data.total;
      //   // Just to simulate the time of the request
      //   setTimeout(() => {
      //     this.listLoading = false;
      //   }, 1.5 * 1000);
      // }
      // );//暂不分页
    },
    showPlotChart() {
      this.plotVisible = true;
      this.$nextTick(() => this.chart()); //在对话框中画图
    },
    chart() {
      //  执行echarts画图方法
      console.log("调用chart方法");
      console.log(this.$refs.myEchart);
      console.log(echarts);
      var myChart = echarts.init(this.$refs.myEchart);
      // 绘制图表
       // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

      myChart.setOption(option);
    },

    handleProblemDetail() {
      this.innerVisible1 = true;
    },
    handleNewAssignment() {
      setTimeout(() => {
        this.outerVisible = false;
      }, 2000);
      var str = {
        //  选中了题目3，4，5
        idassignment: 4,
        title: "验证型实验1",
        classNames: [
          "2019年秋C程序设计1班",
          "2019年秋C程序设计2班",
          "2019年秋C程序设计3班",
          "2019年秋C程序设计4班"
        ],
        commence: "2019-06-08",
        deadline: "2019-07-08",
        status: "未开始"
      };
      setTimeout(() => {
        this.list = new Array(...this.list, str);
      }, 2300);
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    handleCheck(index, row) {
      console.log(index);
      console.log(row.idassignment);
      this.outerVisible1 = true;
    },
    handleInspect(index, row) {
      //打开批量审查窗口
      this.batchVisible = true;
    }
    // handleCreate() {
    //   this.resetTemp();
    //   this.dialogStatus = "create";
    //   this.dialogFormVisible = true;
    //   this.$nextTick(() => {
    //     this.$refs["dataForm"].clearValidate();
    //   });
    // },
    // createData() {
    //   this.$refs["dataForm"].validate(valid => {
    //     if (valid) {
    //       this.temp.id = parseInt(Math.random() * 100) + 1024; // mock a id
    //       this.temp.author = "vue-element-admin";
    //       createArticle(this.temp).then(() => {
    //         this.list.unshift(this.temp);
    //         this.dialogFormVisible = false;
    //         this.$notify({
    //           title: "成功",
    //           message: "创建成功",
    //           type: "success",
    //           duration: 2000
    //         });
    //       });
    //     }
    //   });
    // },
    // handleUpdate(row) {
    //   this.temp = Object.assign({}, row); // copy obj
    //   this.temp.timestamp = new Date(this.temp.timestamp);
    //   this.dialogStatus = "update";
    //   this.dialogFormVisible = true;
    //   this.$nextTick(() => {
    //     this.$refs["dataForm"].clearValidate();
    //   });
    // },
    // updateData() {
    //   this.$refs["dataForm"].validate(valid => {
    //     if (valid) {
    //       const tempData = Object.assign({}, this.temp);
    //       tempData.timestamp = +new Date(tempData.timestamp); // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
    //       updateArticle(tempData).then(() => {
    //         for (const v of this.list) {
    //           if (v.id === this.temp.id) {
    //             const index = this.list.indexOf(v);
    //             this.list.splice(index, 1, this.temp);
    //             break;
    //           }
    //         }
    //         this.dialogFormVisible = false;
    //         this.$notify({
    //           title: "成功",
    //           message: "更新成功",
    //           type: "success",
    //           duration: 2000
    //         });
    //       });
    //     }
    //   });
    // },
    // handleDelete(row) {
    //   this.$notify({
    //     title: "成功",
    //     message: "删除成功",
    //     type: "success",
    //     duration: 2000
    //   });
    //   const index = this.list.indexOf(row);
    //   this.list.splice(index, 1);
    //}
  }
};
</script>
